<template>
  <van-field :label="label" :required="required" :rules="rules">
    <template #input>
      <van-checkbox-group
        :value="value"
        :icon-size="iconSize"
        :direction="direction"
        :disabled="disabled"
        @input="onChange"
      >
        <van-checkbox :class="{'van-vertical-item': direction === 'vertical'}"
          v-for="item in dataList" :key="item[prop.value]" :name="item[prop.value]"
          shape="square"
        >
          {{ item[prop.label] }}
        </van-checkbox>
      </van-checkbox-group>
    </template>
  </van-field>
</template>

<script>
export default {
  name: 'fieldCheckbox',
  props: {
    label: {
      type: String
    },
    value: {
      type: Array
    },
    iconSize: {
      type: String,
      default: '24px'
    },
    /* vertical, horizontal */
    direction: {
      type: String,
      default: 'horizontal'
    },
    required: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array
    },
    dataList: {
      type: Array,
      default: () => []
    },
    prop: {
      type: Object,
      default: () => {
        return {
          value: 'id',
          label: 'name'
        }
      }
    }
  },
  data () {
    return {
      dirty: false
    }
  },
  methods: {
    onChange (val) {
      this.$emit('input', val);
      this.$emit('change', val);
      this.dirty = true;
    },
    setDirty (dirty) {
      this.dirty = dirty;
    },
    getDirty () {
      return this.dirty;
    }
  }
}
</script>

<style scoped>
  .van-vertical-item + .van-vertical-item {
    margin-top: 8px;
  }
</style>
